<template >
  <div>
    <!-- nav导航 -->
    <van-nav-bar
  title="标题"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>
    <!-- 商品轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>

    <!-- 中间内容 -->
      <div class="container">
    <div class="content">
      <div class="content_top">
        <span class="top_icon">￥</span>
        <span class="pprice">129</span>
        <span class="price">￥199</span>
        <span class="kk">限时抢购</span>
        <span class="kk">不可用券</span>
      </div>
      <div class="content_mid">
        固特异同厂专车定制 卡布达 丝圈脚垫【黑灰色五座】
      </div>
      <div class="content_bottom">
        🔥<a href="">【12.12提前放“价”狂欢】【专车定制全车脚垫99元抢】【车载香水9.9秒杀】【大牌座垫不止5折秒】更多限时特惠，点击抢购👈👈👈</a>
      </div>
    </div>
  </div>
    <!-- 底部选项栏 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
    </van-goods-action>
  </div>
</template>

 <style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
 *{
      margin: 0;
      padding: 0;
    }
    .container{
      width: 100%;
    }
    .content{
     padding: 6px 16px;
      background-color: whitesmoke;
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      overflow: hidden;
      flex-direction: column
    }
    .content_top{
      /* background-color: violet; */
      width: 100%;
      padding: 0.3rem 0.8rem;
    }

    
    .top_icon{
      margin-right: 0.2rem;
      color: #DF3448;
      font-size: 15px;
      position: relative;
      top: -0.1rem;
    }
    .pprice{
      font-size: 24px;
      color: #DF3448;
    }
    .price{
      font-size: 14px;
      color: #999999;
      text-decoration: line-through;
    }
    .kk{
      font-size: 12px;
      background-color:#FBE5E8 ;
      position: relative;
      top: 0.2rem;
    }
    .content_mid{
      font-size: 16PX;
      color: #3D4145;
      width: 100%;
      padding: 0.3rem 0.8rem;
    }
    .content_bottom{
      color: #DF3348;
      font-size: 12px;
      width: 100%;
      padding: 0.3rem 0.8rem;
    }
</style>